import React,{Component} from "react";
import { View, Text, Image, StyleSheet, FlatList, ActivityIndicator, TouchableWithoutFeedback } from "react-native";
import * as RootNavigation from '../../../App';
import TopicCell from "./TopicCell";
import PopUp from "../../widget/PopUp";
import NetUtil from '../../net/net_util'
import Loading from "../../widget/Loading";
import Toast from "../../widget/Toast";


export default class RecommendList extends Component{
  constructor(props) {
    super(props);
    this.type=1;
    this.page={
      pageNum:1,
      pageSize:10
    }
    this.state={
      isMoreLoading:true,
      refreshing:false,
      loading:false,
      dataList:[]
    }
  }

  componentDidMount() {
    this.type=this.props.type
    this.getDynamicList()
  }

  /*获取动态*/
  getDynamicList(){
    let params={
      type:this.type,
      pageNum:this.page.pageNum,
      pageSize:this.page.pageSize
    }
    this.loading=true
    NetUtil.get('trend/dynamic/page',params,(res)=>{
      console.log(res)
      this.loading=false
      if(res.code==200){
        let list=this.state.dataList;
        if(this.page.pageNum==1){
          list=[]
        }
        list=list.concat(res.data.data)
        this.setState({dataList:list,isMoreLoading:res.data.data.length<10?false:true})
      }
      setTimeout(()=>{
        this.setState({refreshing:false})
      },500)
    })
  }

  _onRefresh(){
    this.setState({refreshing:true})
    this.page.pageNum=1
    this.getDynamicList()
  }

  _endReached(){
    if(!this.state.isMoreLoading||this.state.loading)return;
    this.page.pageNum++;
    this.getDynamicList();
  }

  goToDetail(data){
    console.log(data)
    RootNavigation.navigate('DynamicDevelopmentDetail',{id:data.id})
  }

  goToCommentDetail(){
    RootNavigation.navigate('CCommentList',{})
  }

  personClick(){
    RootNavigation.navigate('PersonHomePage',{})
  }

  /*关注*/
  focusClick(data){
    Loading.show()
    NetUtil.postFrom('trend/topic/follow',{topicId:data.topicId},(res)=>{
      Loading.hide()
      if(res.code==200){
        data.isFollow=data.isFollow==1?0:1
        this.setState({dataList:this.state.dataList})
      }
      else {
        Toast.add(res.msg)
      }
    })
  }

  showShare(){
    // this.PopUp=new PopUp()
    PopUp.show()
  }

  /*发布*/
  publish(){
    RootNavigation.navigate('PublishTopic',{})
  }

  _renderItem=(info)=>{
    let item=info.item
    return (
      <TopicCell data={item}
                 type={this.type}
                 fromPlatform={item.source==2?true:false}
                 cellClick={this.goToDetail.bind(this)}
                 menuClick={this.showShare.bind(this)}
                 personClick={this.personClick.bind(this)}
                 focusClick={(data)=>{this.focusClick(data)}}
                 commentClick={this.goToCommentDetail.bind(this)}>
      </TopicCell>
    )
  }
  _separator(){
    return <View style={{backgroundColor:'#F6F6F6',height:5}}></View>
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  render(){
    return (
      <View style={{flex:1}}>
        <FlatList
          data={this.state.dataList}
          showsVerticalScrollIndicator={false}
          onEndReachedThreshold = {0.1} //当距离内容比例不足内容0.1比例时触发onEndReached
          onRefresh = {this._onRefresh.bind(this)}
          onEndReached = {this._endReached.bind(this)} //上拉加载数据
          refreshing = {this.state.refreshing}
          renderItem={this._renderItem}
          ItemSeparatorComponent={this._separator}
          ListFooterComponent={()=>this.renderFooter()}
          keyExtractor={(item)=>{return `cell_${this.type}_${item.id}`}}>
        </FlatList>
        <TouchableWithoutFeedback onPress={this.publish.bind(this)}>
          <Image style={styles.publish} source={require('../../img/publish_dynamic_icon.png')}></Image>
        </TouchableWithoutFeedback>
        {/*<PopUp></PopUp>*/}
      </View>
    )
  }
}

const styles=StyleSheet.create({
  publish:{
    position:'absolute',
    bottom:18,
    right:10,
    width:67,
    height:67
  }
})
